<template>
  <view class="assess">
    <navigation back title="写评价" />

    <view class="page-container">
      <view class="container">
        <!-- 服务信息 -->
        <serviceInfo />

        <!-- 信息栏 -->
        <view class="form-view">
          <view class="craftsman-view">
            <image src="@/static/image/common/test.png" mode="aspectFill" />
            <view class="content">
              <view class="name flex flex-middle">
                张诗雨
                <text> 7.9分 </text>
              </view>
              <view class="tips"> 累计接单2517 </view>
            </view>
          </view>
          <view class="star">
            <view class="line"></view>
            <view class="titles text-center">
              您的评价有助于商户提供更好的服务
            </view>
            <view class="star-view flex flex-center">
              <u-rate
                active-color="#FFCE82"
                inactive-color="#b2b2b2"
                count="10"
                size="26"
                v-model="num"
              />
            </view>
            <view class="num text-center">
              {{ `${num}分` }}
            </view>
            <view class="form-info">
              <view class="title">请留下您的评价</view>
              <u--textarea
                class="textarea"
                count
                autoHeight
                placeholder="请输入评价"
                maxlength="200"
              />
              <u-upload
                multiple
                uploadIcon="plus"
                maxCount="3"
                height="60"
                width="60"
                @afterRead="afterRead"
                @delete="deletePic"
              />
              <view class="up-title"> 最多上传3张 </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作栏 -->
    <view class="bottom-view safe-bottom">
      <view class="bottom safe-bottom">
        <view class="page-container">
          <view class="bottom-container flex flex-middle">
            <view class="btn flex flex-middle flex-center"> 提交评价 </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import serviceInfo from "./components/serviceInfo";

export default {
  components: {
    serviceInfo,
  },
  data() {
    return {
      num: 10,
      seasonList: [
        "个人信息填错了",
        "想更换套餐",
        "与客服协商一致退款",
        "计划临时有变，不考虑下单了",
        "觉得价格有点贵",
        "其他",
      ],
    };
  },
  methods: {
    afterRead({ file }) {
      console.log(file);
    },
    deletePic(e) {
      console.log(e);
    },
  },
};
</script>

<style scoped lang="scss">
.form-view {
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  margin-top: 12px;

  .form-info {
    margin-top: 16px;

    ::v-deep .u-upload__button {
      background: none !important;
      border: 1px dashed #d3d4d6;
    }

    .up-title {
      font-size: 12px;
      color: #999;
    }

    .textarea {
      min-height: 126px;
      padding-bottom: 24px;
      margin-bottom: 18px;

      ::v-deep textarea {
        min-height: 126px;
      }
    }

    .title {
      font-weight: bold;
      color: #2c2c2c;
      margin-bottom: 8px;
    }
  }

  .star {
    margin-top: 34px;
    position: relative;

    .num {
      color: #979797;
      margin-top: 8px;
    }

    &-view {
      margin-top: 20px;
    }

    .line {
      height: 1px;
      background: #e0e0e0;
      margin: 0 10px;
    }

    .titles {
      color: #979797;
      background: #fff;
      position: absolute;
      left: 50%;
      top: -10px;
      width: 240px;
      margin-left: -120px;
    }
  }

  .craftsman-view {
    overflow: hidden;

    .tips {
      font-size: 11px;
      color: #9d9d9d;
    }

    .name {
      font-size: 14px;
      color: #333;
      font-weight: bold;
      padding-top: 4px;

      text {
        font-size: 13px;
        color: #fa6400;
        margin-left: 6px;
      }
    }

    .content {
      padding-left: 50px;
    }

    image {
      float: left;
      width: 42px;
      height: 42px;
      border-radius: 50%;
    }
  }
}

.bottom-view {
  height: 64px;

  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    width: 100vw;
    box-shadow: 0px 0px 8px 0px rgba(218, 218, 218, 0.5);

    .btn {
      height: 40px;
      width: 100%;
      border-radius: 20px;
      font-weight: bold;
      margin-left: 8px;
      background: #31bc4e;
      color: #fff;
      font-weight: bold;
    }

    &-container {
      padding: 0 54px;
      height: 64px;
    }
  }
}

.assess {
  min-height: 100vh;
  background: #f6f6f6;
}

.container {
  padding: 16px;
}
</style>